<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>乐码在线智慧平台-班级统计</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="../../static/favicon.ico" th:href="@{/static/favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" th:href="@{/static/css/bootstrap.min.css(v='3.3.6')}"
          rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" th:href="@{/static/css/font-awesome.css(v='4.4.0')}"
          rel="stylesheet">
    <link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css"
          th:href="@{/static/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link href="../../static/css/animate.css" th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0" th:href="@{/static/css/style.css(v='4.1.0')}" rel="stylesheet">
    <style type="text/css">
        .table > thead > tr > th    {
            color: #2a62bc;
        }
        .fixed-table-container{
            padding-bottom: 0px;margin-top: 55px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight animated fadeInRight">

    <div class="pull-left">
        <form class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" id="clazz_number" placeholder="请输入班级编号">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="clazz_name" placeholder="请输入班级名称">
            </div>
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control org" id="org" placeholder="请选择所在机构">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        </ul>
                    </div>
                    <!-- /btn-group -->
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control branch" id="branch" placeholder="请选择所属分支" >
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        </ul>
                    </div>
                    <!-- /btn-group -->
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control major" id="major" placeholder="请选择专业方向" >
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        </ul>
                    </div>
                    <!-- /btn-group -->
                </div>
            </div>
            <input type="button" class="btn btn-primary" value="查询" id="queryBtn"/>
        </form>
    </div>
    <div>
        <table id="table"></table>
    </div>
</div>
<!--详情模态框-->
<div class="modal fade" id="details" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" data-dismiss="modal">&times;</span>
                <h3 class="modal-title">详情</h3>
            </div>

            <div class="modal-body" style="min-height: 400px;margin-top: 20px">
                <button class="btn btn-info" data-toggle="modal" data-target="#batch-export">批量导出</button>
                <table id="infotable"></table>
            </div>

        </div>
    </div>
</div>
<!--批量导出模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="batch-export">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title">提示</h2>
            </div>
            <div class="modal-body">
                <h3>确认是否导出该班级的所有信息?</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-info">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" tabindex="-1" role="dialog" id="importModal">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">导出</h4>
            </div>
            <div class="modal-body">
                <p>是否导出该学生的个人学习数据？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确认导出</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4" th:href="@{/static/js/jquery.min.js('v=2.1.4')}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6" th:href="@{/static/js/bootstrap.min.js('v=3.3.6')}"></script>

<!-- 自定义js -->
<script src="../../static/js/content.js?v=1.0.0" th:href="@{/static/js/content.js(v='1.0.0')}"></script>


<!-- Bootstrap table -->
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js"
        th:href="@{/static/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"
        th:href="@{/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:href="@{/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!--动态搜索-->
<script src="../../static/js/plugins/suggest/bootstrap-suggest.min.js"
        th:href="@{/static/js/plugins/suggest/bootstrap-suggest.min.js}"></script>
<!-- Sweet alert -->
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
        th:href="@{/static/js/plugins/sweetalert/sweetalert.min.js}"></script>
<!-- Switchery -->
<script src="../../static/js/plugins/switchery/switchery.js"
        th:href="@{/static/js/plugins/switchery/switchery.js}"></script>

<script>
    $(function () {
        //初始化表格
        var init = new initdata();
        //点击按钮开始搜索
        $("#queryBtn").click(function () {
            var major = $("#major").val();
            var org = $("#org").val();
            var branch = $("#branch").val();
            alert(org+branch+major);
            //判断条件是否存在
            if (major == "" && org == "" && branch == "") {
                alert("请选择查询条件");
                return;
            }
            //执行查询
            init.Init();
        });
        init.Init();

        //动态搜索选择下拉框
        testdataBsSuggest1;
        testdataBsSuggest2;
        testdataBsSuggest3;
    });
    var initdata = function () {
        var init = new Object();
        init.Init = function () {
            //加载之前先格式化 防止查询的时候起冲突
            // $("#table").bootstrapTable('destroy')
            $("#table").bootstrapTable({
                url: '../../static/js/demo/analysis/clazzCount.json',
                method: 'get',
                striped: true,  //是否显示行间隔色
                cache: false, //是否使用缓存
                pagination: true, //是否分页
                pageSize: 5,  //每页记录行数
                uniqueId: 'id',  //唯一id
                pageList: [5, 10, 20],
                queryParams: init.queryParams, // 传递参数
                columns: [{
                    field: "checkbox",
                    checkbox: true
                }, {
                    field: 'id',
                    title: "序号",
                    align: "center"
                }, {
                    field: 'clazzName',
                    title: "班级",
                    align: "center"
                }, {
                    field: 'progress',
                    title: "班级综合进度",
                    align: "center",
                    formatter: studyPro
                },  {
                    field: 'operator',
                    title: "操作",
                    align: "center",
                    valign: "middle",
                    formatter: actionFormatter,//方法调用
                }]

            });
        };
        init.queryParams = function (params) {
            console.log(params);
            // console.log($('#name').val());
            return {
                offset: params.offset,//从数据库第几条记录开始
                limit: params.limit,//找多少条
                org: $("#org").val(),
                branch: $("#branch").val(),
                major:$("#major").val()
            };
        }

        //班级综合进度
        function studyPro(value, row, index) {
            var id = value;
            var result = "";
            // console.log(row.id);
            // console.log(row.name+"--"+index +"--"+value);
            result += "<div class=\"progress progress-striped active\">\n" +
                "<div style=\"width: "+row.progress+"%;\" class=\"progress-bar\"><span style=\"color:black;\">"+row.progress+"%</span></div>\n" +
                "</div>";
            return result;
        };

        //操作栏的格式化
        function actionFormatter(value, row, index) {
            var id = value;
            var result = "";
            // console.log(row.id);
            // console.log(row.name+"--"+index +"--"+value);
            result += "<button class='btn   btn-white' title='详情' style='margin-right: 10px' data-toggle='modal' data-target='#details'><i class='glyphicon glyphicon-info-sign text-success'></i></button>";
            return result;
        };
        return init;
    }
    var testdataBsSuggest1 = $(".org").bsSuggest({
        indexId: 2, //data.value 的第几个数据，作为input输入框的内容
        indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
        //TODO 通过json显示数据
        data: {
            'value': [
                {
                    'id': "",
                    'word': '青英教育',
                },
                {
                    'id': "",
                    'word': '黑马',
                },
                {
                    'id': "",
                    'word': '华清远见',
                },
                {
                    'id': "",
                    'word': '达内教育',
                }
            ]
        }
    });

    var testdataBsSuggest2 = $(".branch").bsSuggest({
        indexId: 2, //data.value 的第几个数据，作为input输入框的内容
        indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
        //TODO 通过json显示数据
        data: {
            'value': [
                {
                    'id': "",
                    'word': '前端',
                },
                {
                    'id': "",
                    'word': '后端',
                },
                {
                    'id': "",
                    'word': '架构',
                },
                {
                    'id': "",
                    'word': 'UI',
                }
            ]
        }
    });

    var testdataBsSuggest3 = $(".major").bsSuggest({
        indexId: 2, //data.value 的第几个数据，作为input输入框的内容
        indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
        //TODO 通过json显示数据
        data: {
            'value': [
                {
                    'id': "",
                    'word': 'C++',
                },
                {
                    'id': "",
                    'word': 'Java',
                },
                {
                    'id': "",
                    'word': 'Mysql',
                },
                {
                    'id': "",
                    'word': 'Oracl',
                }
            ]
        }
    });

/*初始化模态框中的bootstraptable*/
    $(function () {
        $("#infotable").bootstrapTable({
            url: '../../static/js/demo/analysis/info.json',        // 表格数据来源
            toolbar : '#toolbar', // 工具按钮用哪个容器
            method:'get',
            pagination : true,
            cache:false,
            sortable : true, //是否启用排序
            sortOrder : "asc", // 排序方式
            sidePagination : "client", // 分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,
            pageSize:10,
            pageList: [10, 25, 50, 100],
            columns: [{
                checkbox:true
            },{
                field:'name',
                title:"学生姓名"
            },{
                field:'studyProgress',
                title:"学习进度",
                formatter:studyProgress
            },{
                field:'workProgress',
                title:"作业进度",
                formatter:workProgress
            },{
                field:'operate',
                title:"操作",
                align:'center',
                formatter:addFunctionAlty,
                events:{
                    'click button[title=查看详情]':function (e,value,row,index) {
                        alert("查看详情！")
                    }
                }
            }]
        });
    })
    function addFunctionAlty(value,row,index) {
        return '<a href="dataTable.html" id="+id+" type="button" class="btn btn-white" title="查看详情">' +
            '<i class="glyphicon glyphicon-info-sign text-success"></i></a>'+
                '<a href="" id="+id+" type="button" class="btn btn-white" title="导出个人学习数据" data-toggle="modal" data-target="#importModal">' +
            '<i class="glyphicon glyphicon-import text-info"></i></a>'
    }
    
    function studyProgress(value,row,index) {
        var id = value;
        var result = "";
        // console.log(row.id);
        // console.log(row.name+"--"+index +"--"+value);
        result += "<div class=\"progress progress-striped active\">\n" +
            "<div style=\"width: "+row.studyProgress+"%;\" class=\"progress-bar\"><span style=\"color:black;\">"+row.studyProgress+"%</span></div>\n" +
            "</div>";
        return result;
    }
    function workProgress(value, row, index) {
        var id = value;
        var result = "";
        // console.log(row.id);
        // console.log(row.name+"--"+index +"--"+value);
        result += "<div class=\"progress progress-striped active\">\n" +
            "<div style=\"width: "+row.workProgress+"%;\" class=\"progress-bar\"><span style=\"color:black;\">"+row.workProgress+"%</span></div>\n" +
            "</div>";
        return result;
    };
</script>
</body>
</html>